<%@include file="../context.jsp"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stock Screener</title>
<%@include file="../common_imports.jsp"%>
<script type="text/javascript">
	$(document).ready(
			function() {
				$('#myTab a').click(function(e) {
					e.preventDefault();
					$(this).tab('show');
				});
				$('#sendEmail').on(
						'click',
						function() {
							var email = $('#emailAddress').val();
							//alert(email);
							sendInvitation(email);
							if (!isEmail(email)) {
								$('#massage_span').text("This is correct");
								$('#massage_span').fadeOut(3000);
								sendInvitation(email);
							} else {

								$('#massage_span').text("This is incorrect");
								$('#massage_span').fadeOut(3000);
								$('#emailAddress').removeClass("correct_email")
										.addClass("error_email");
							}

						});

				$('#emailAddress').on(
						'change',
						function() {
							if (!isEmail($(this).val())) {
								$(this).removeClass("correct_email").addClass(
										"error_email");
							} else {
								$(this).removeClass("error_email").addClass(
										"correct_email");
							}
						});
				$(function() {
					$('#myTab a:first').tab('show');
				});
			});

	function isEmail(email) {
		var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		return regex.test(email);
	}

	function sendInvitation(email) {
		$.ajax({
			url : "/StockScreener/myaccount/sendinvitation",
			type : "POST", 		
			data : {email: email},
			success : function() {
			},
			error : function() {
				alert("Error with AJAX callback");
			}
		});
	}
</script>
</head>
<body>
	<div class="main_wrapper">
		<div class="container-fluid">
			<div class="row-fluid">
				<%@include file="../stockscreener/header.jsp"%>
			</div>
			<div class="row-fluid">
				<div class="main_menu_wrapper span12">
					<div class="navbar">
						<div class="navbar-inner">
							<div class="container">
								<button class="btn btn-navbar collapsed"
									data-target=".nav-collapse" data-toggle="collapse"
									type="button">
									<div class="icon_wrapper"
										style="float: right; padding: 5px 10px;">
										<span class="icon-bar"></span> <span class="icon-bar"></span>
										<span class="icon-bar"></span>
									</div>
								</button>

								<div class="nav-collapse collapse">
									<%@include file="../header_link.jsp"%>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row-fluid">
				<div class="left_mod span3">
					<div class="left_menu">
						<ul class="nav menu nav-pills nav-stacked" id="myTab">
							<li><a class="active" href="#my_profile">My Profile</a></li>
							<li><a href="#upgrate_profile">Upgrade</a></li>
							<c:if test="${isBroker}">
								<li><a href="#send_mail">Send invitation</a></li>
							</c:if>
						</ul>
					</div>
				</div>
				<div class="tab-content span9" style="background-color: #ffffff">
					<div>${message}</div>
					<div class="tab-pane my_info_wrappr" id="my_profile">
						<h4>My Profile</h4>
						<table width="100%" class="table-responsive my_account_div">
							<tr>
								<td>User Category :</td>
								<td>${logedUser.userCategory.name}</td>
							</tr>
							<tr>
								<td width="20%">Username :</td>
								<td width="80%">${logedUser.userName}</td>
							</tr>
							<tr>
								<td>Email :</td>
								<td>${logedUser.email}</td>
							</tr>
							<tr>
								<td>Mobile Number :</td>
								<td>${logedUser.telephone}</td>
							</tr>
						</table>
						<div class="my_account_div">
							<a class="btn btn-info"
								href="${pageContext.request.contextPath}/user/edit/${logedUser.id}.html">Edit</a>
						</div>
					</div>
					<div class="tab-pane my_info_wrappr" id="upgrate_profile">
						<h4>Upgrade</h4>
						<table width="100%" class="table-responsive my_account_div">
							<tr>
								<td>Upgrade free account to paid account you can access
									more features and more information</td>
							</tr>
						</table>
						<div class="my_account_div">
							<a class="btn btn-info" href="/StockScreener/myaccount/upgrade">Upgrade</a>
						</div>
					</div>

					<c:if test="${isBroker}">

						<div class="tab-pane my_info_wrappr" id="send_mail">
							<h4>Send invitation to customer</h4>
							<table width="100%" class="table-responsive my_account_div">
								<tr>
								<tr>
									<td><span id="massage_span"></span></td>
								</tr>
								<td>email address</td>
								<td><input type="text" name="email" id="emailAddress"
									value="" /></td>
								<td><input type="button" id="sendEmail" value="Send" /></td>
								</tr>
							</table>
						</div>
					</c:if>
				</div>
			</div>

			<div class="footer_wrapper">
				<%@include file="../footer.jsp"%>
			</div>
		</div>
	</div>

</body>
</html>
